import { useState } from "react"
import React from 'react'

function Header(props) {
  console.log('header组件渲染了')
  const { add, showAdd, show, done, total } = props
  const [inputVal, setInputVal] = useState('')
  const handleAdd = () => {
    const val = inputVal.trim()
    if (val) {
      add(val)
      setInputVal('')
    }
  }
  return (
    <div className="header">
      <div className="title">
        <div>事件待办</div>
        <div><span>已完成 {done}</span><span>共 {total}</span></div>
      </div>
      <span className="plusIcon" onClick={showAdd}>+</span>
      <div className={`inputArea ${show && 'show'}`}>
        <input 
          type="text"
          placeholder="请输入待办事项"
          className={`input`}
          value={inputVal}
          onChange={e => setInputVal(e.target.value)}
        />
        <button className="addBtn" onClick={handleAdd}>增加</button>
      </div>
    </div>
  )
}

export default React.memo(Header)